<template>
	<div id="app">

		<div class="cp-header">
			<div class="cp-main-box">
				<a href="/" class="cp-logo">
					<!-- 主页logo -->
					<img src="../../public/img/logo.png">
				</a>
				<div class="layui-nav headerRight"  lay-filter="">
					<!-- 搜索框 -->
					<div class="cp-header-search">
						<input id="searchBox" @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
						<a href="javascript:" class="iconfont icon-search"></a>
					</div>

					<div class="cp-header-link">
						<!-- 跳转充值页面 -->
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
					</div>

					<div class="layui-nav-item" id="userMsgBox">
						<!-- 跳转用户个人中心 -->
						<a href="/user/info">
							<i class="iconfont icon-dengpao"></i>
							<!-- 用户头像（可选） -->
							<img src="/img/default_head.png" class="layui-nav-img header">
							<!-- 用户名 -->
							<span class="userName cp-ellipsis" v-text="userName"></span>
							<!-- 更多 -->
							<span class="layui-nav-more"></span>
						</a>

						<dl class="layui-nav-child" id="userMsgChild">
							<dd>
								<a href="javascript:;" @click="logout()">
									<i class="iconfont icon-tuichu"></i>
									退出
								</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>

		<el-container class="main-box">
		  <el-aside width="150px">
			  <el-col :span="22">
			      <el-menu default-active="1" text-color="#333" active-text-color="rgba(81, 194, 154, 1)">
					  <router-link to="/user/info">
						  <el-menu-item index="1">
						  <i class="el-icon-s-custom"></i>
						  <span slot="title">
							  <router-link to="/user/info">个人资料</router-link>
						  </span>
						</el-menu-item>
					  </router-link>
					  <router-link to="/user/charge">
						  <el-menu-item index="2">
							  <i class="el-icon-s-cooperation"></i>
							  <span slot="title">
							  <router-link to="/user/charge">账户管理</router-link>
							  </span>
						  </el-menu-item>
					  </router-link>
					  <router-link to="/user/coll">
						<el-menu-item index="3">
						  <i class="el-icon-tickets"></i>
						  <span slot="title">
							  <router-link to="/user/coll">我的书架</router-link>
						  </span>
						</el-menu-item>
					  </router-link>
					  <router-link to="/author/index">
						<el-menu-item index="6">
						  <i class="el-icon-edit"></i>
						  <span slot="title">
							  <router-link to="/author/index" >作者中心</router-link>
						  </span>
						</el-menu-item>
					  </router-link>
			      </el-menu>
			    </el-col>
		  </el-aside>
		  <el-main>
			  <router-view/>
		  </el-main>
		</el-container>
		<Footer></Footer>
	</div>
</template>
<script>
import Footer from '../components/Footer'
import $ from 'jquery'

export default {
    name: 'User',
    components: {
		Footer
    },
    data() {
        return {
			// 登录模态框可见
			loginDialogVisible: false,
			// 搜索内容
			searchContent: "",
        }
	},
	created() {
		layui.use('element');
	},
	computed: {
		// 用户名
		userName: function () {
			return sessionStorage.getItem("userName");
		}
	},
	methods: {
		// 搜索
		search() {

		},
		// 注销
		logout() {
			sessionStorage.clear();
			location.reload();
		},
	}
}
</script>
<style scoped>
	.main-box {
		margin-top: 10px;
		margin-left: 200px;
		margin-right: 200px;
	}
	.el-button {
		background-color:#51c29a;
		border: #51c29a 1px solid;
		width: 100%;
		border-radius: 3px;
	}
	.el-button:hover {
		background-color:#7adbbb;
		border: #7adbbb solid 1px;
	}
	.loginBoxTitle {
		bottom: 20px;
	}
</style>
